import React, { useEffect, useState } from "react";

import "./index.scss";
import logo from "@/assets/images/logo.png";
import mouse from "@/assets/images/mouse.png";
import down from "@/assets/images/down.png";

import TabHeader from "@/components/TabHeader";
import CategoryList from "@/components/CategoryList";
import OrderProcess from "@/components/OrderProcess";

import { primaryColor, categorys, tabs as defaultTabs, orderTexts } from "../constant.jsx";
import { getWebSiteConfigInfo } from "@/api/index.js";

export default function Index() {
	const [tabs, setTabs] = useState(defaultTabs)
	const [currentTab, setCurrentTab] = useState(tabs[0]);
	const [data, setData] = useState({
		emailEn: [],
		emailCn: [],
		domain: []
	});
	useEffect(() => {
		getWebSiteConfigInfo().then(result => {
			console.log(result)
			const data = result.data
			setData({
				emailEn: [data.pcEmailEn, data.h5EmailEn, data.appEmailEn, data.specialEmailEn],
				emailCn: [data.pcEmailCn, data.h5EmailCn, data.appEmailCn, data.specialEmailCn],
				domain: [data.pcDomain, data.h5Domain, data.appDomain, data.specialDomain]
			})
		})
	}, []);


	return <div className="page">
		<div className="flex-center header">
			<img className="logo" src={logo} alt="" />
			<span>稳达速安梯装</span>
		</div>
		<div className="banner-container">
			<img className="mouse" src={mouse} alt="" />
			<img className="down" src={down} alt="" />
		</div>

		<TabHeader
			tabs={tabs}
			currentTab={currentTab}
			setCurrentTab={setCurrentTab}
			primaryColor={primaryColor}
			data={data}
		/>

		<CategoryList categorys={categorys} />
		<OrderProcess orderTexts={orderTexts} primaryColor={primaryColor} />

		<div className="flex-center footer">
			<span>Copyright @ 2025   wendasuan Group Company Ltd.</span>
		</div>
	</div>;
}
